<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @keyframes tion {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
</style>
<body>
</body>
<script>
    //获取鼠标移动坐标
   
    document.addEventListener('mousemove',function(){
            let shubiaoSun = document.querySelectorAll('img');
            if(shubiaoSun.length > 35){
                return;
            }else{
                let shubiaoImg = document.createElement('img');
                shubiaoImg.src = 'pexels-photo-17975892.jpeg'
                shubiaoImg.style.position = 'absolute';
                shubiaoImg.style.width = 30 + 'px';
                shubiaoImg.style.height = 30 + 'px';
                shubiaoImg.style.transition = 'all .5s ease-in-out .5s';
                shubiaoImg.style.animation = 'tion .5s ease-in-out'
                let pageX = event.clientX;
                let pageY = event.clientY;
                shubiaoImg.style.left = pageX+5 + 'px';
                shubiaoImg.style.top = pageY+5 + 'px';
                document.body.appendChild(shubiaoImg);
                shubiaoImg.addEventListener('animationend',function(){
                    document.body.removeChild(shubiaoImg);
                })
            }
    })

    
    
</script>
</html>